<template>
  <div class="home">
    <Tabs @on-click="changeTab">
      <TabPane v-for="(item,index) in category_list" :label="item.name" :id="item.id" :key="index" >
        <Card v-for="item of current_list" :key="item.question_id" :title="item.caption">
          <p>{{item.content}}</p>
          <p>提问时间：{{item.create_time}} 提问者：{{item.author_name}}</p>
        </Card>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "home",
  data() {
    return {
      current_list:[],
      current_index_id:"",
      category_list:[],
    };
  },
  methods:{
     changeTab(key){
      const index=parseInt(key)
      this.fetchApiContent(this.category_list[index].id)
     },
     async tabList(){
        await axios.get("/api/category/list").then(res=>{
            console.log(res.data,'res')
            this.category_list=res.data.data
            this.fetchApiContent(this.this.category_list[0].id)
        })
     },
     async fetchApiContent(category_id){
        await axios({methods:'get',url:"/api/question/list",params:{category_id:category_id}}).then(res=>{
            this.current_list=res.data.data;
        })
     }
  },
  created(){
        this.tabList()
  }
};
</script>
